const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
    mode:'development',
    entry:{
        main:'./src/index.js'
    },
    resolveLoader: {
      modules: [
        'node_modules',
        path.resolve(__dirname, './easy-code-loader')              
      ]
    },
    devtool: "source-map",   
    module: {
      rules: [
        // {
        //   test:/\.miky$/,
        //   use: [
        //     {
        //       loader: MiniCssExtractPlugin.loader,
        //       options: {
        //         hmr: process.env.NODE_ENV === 'development',
        //       },
        //     },                
        //     'css-loader',              
        //     'replaceLoader',
        //   ],
        // },
       
          {
            test: /\.(sa|sc|c)ss$/,
            use: [
              {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  hmr: process.env.NODE_ENV === 'development',
                },
              },                
              {
                loader: "css-loader", options: {
                    sourceMap: true
                }
            }, {
                loader: "sass-loader", options: {
                    sourceMap: true
                }
            }, {
              loader: "easyloader",options:{
                cssreplace:true,
                mixins:[ {$w:'width'}, {$h:'height'}]
              }
             }
            ],
          },
          {
            test: /\.js$/,
            use: [{
              loader: "easyloader",options:{
                type:'js'               
              }
             }]
          }
      
          //   {
          //   test: /\.scss$/,
          //   use: [{
          //       loader: "style-loader" // 将 JS 字符串生成为 style 节点
          //   }, {
          //       loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
          //   }, {
          //       loader: "sass-loader" // 将 Sass 编译成 CSS
          //   }]
          // },
          // {
          //   test:/\.miky$/,
          //   use: [{
          //       loader: "style-loader" // 将 JS 字符串生成为 style 节点
          //   }, {
          //       loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
          //   }, {
          //       loader: "replaceLoader" // 将 Sass 编译成 CSS
          //   }]
          // }   
    ]
        // rules: [
        //   {
        //     test:/\.js$/,
        //     use:'replaceLoader'
        //   },          
        //     { test: /\.css$/, use: 'css-loader' },        
        //     {
        //       test: /\.miky$/,
        //       use: [
        //         {
        //           loader: path.resolve('./loaders/replaceLoader.js'),
        //           options: {name:'miky'}
        //         }
        //       ]
        //     }
        //   ]
      }, 
    plugins: [
      new CleanWebpackPlugin(),
        new HtmlWebpackPlugin(),        
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: devMode ? '[name].css' : '[name].[hash].css',
          chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        }),
      ],  
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename:'[name].[hash:8].js',
        chunkFilename:'[name].chunk.js',
    }
}